<template>
    <div id="SpatialQuery">
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="条件查询" name="first" align="center">
                <el-select v-model="value8" filterable placeholder="请选择图层">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-select v-model="value8" filterable placeholder="请选择字段">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-select v-model="value8" filterable placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
                <el-form ref="form">
                    <el-input></el-input>
                </el-form>
                <el-button type="primary" plain>查询</el-button>
            </el-tab-pane>
            <el-tab-pane label="地图查询" name="second">
                <el-row>
                    <el-col :span="24"><div align="center"><el-button type="primary" icon="el-icon-search">搜索</el-button></div></el-col>
                </el-row>
                <el-row>
                    <el-col :span="24"><div align="center"><el-button type="primary" icon="el-icon-search">搜索</el-button></div></el-col>
                </el-row>
                 <el-row>
                    <el-col :span="24"><div align="center"><el-button type="primary" icon="el-icon-search">搜索</el-button></div></el-col>
                </el-row>
                
                <el-row>
                    <el-col :span="24"><div align="center"><el-button style="margin-top:50px;width:100px;" type="primary" icon="el-icon-search">搜索</el-button></div></el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '专题图层1'
        }, {
          value: '选项2',
          label: '专题图层2'
        }, {
          value: '选项3',
          label: '专题图层3'
        }, {
          value: '选项4',
          label: '专题图层4'
        }, {
          value: '选项5',
          label: '专题图层5'
        }],
        value8: '',
        activeName:'first'
      };
    }
  }
</script>
 
<style>
    #SpatialQuery .el-select{
        margin-top: 10px;
        margin-bottom: 10px;
    }
    #SpatialQuery .el-form .el-input__inner{
        width:75%;
        margin-top: 5px;
    }

    #SpatialQuery .el-tab-pane:first-child .el-button{
        margin-top: 50px;
    }

    #SpatialQuery .el-row .el-button{
        width:180px;
    }

    #SpatialQuery .el-row{
        margin-top: 10px;
        margin-bottom: 30px;
    }

</style>

